<template>
	<view class="container">
		<view class="box">
			<view class="fs34 col10 fwb pb20">跟进内容<text class="fs34 red">*</text></view>
			<picker :range="followList" :value="pickerIndex" @change="pickerChange">
				<view class="flex-box m-arrow-right form_item br10">
					<view class="fs24 col10 flex-grow-1">选择跟进状态</view>
					<view class="fs30 col10" :class="pickerIndex==-1?'col89':''">
						{{pickerIndex == -1?'请选择':followList[pickerIndex]}}
					</view>
				</view>
			</picker>
			<textarea v-model="name" placeholder="请输入跟进标题" class="fs24 p20 t1 mt20 br10" placeholder-class="col89" />
			<textarea v-model="discription" placeholder="请输入跟进详细描述" class="fs24 p20 t2 mt20 br10" placeholder-class="col89" />
			<textarea v-model="dissatisfaction" placeholder="请输入跟进不满意的描述" class="fs24 p20 t2 mt20 br10" placeholder-class="col89" />
			<view class="up_box p20 mt20 br10">
				<view class="fs24 col89 pb20">上传图片</view>
				<view class="flex-box flex-wrap">
					<view class="img_box" v-for="(item, index) in images_text_arr">
						<image @tap.stop.prevent="delImg" :data-index="index" src="/static/icon/close.png"  class="close" mode="aspectFill"></image>
						<image :data-index="index" :lazy-load="true" :src="item" class="img" mode="aspectFill"></image>
					</view>
					<view @tap="upload" class="img_box flex-box flex-col flex-center">
						<image src="/static/icon/icon_up.png" class="icon_up" mode="aspectFill"></image>
						<view>上传图片</view>
					</view>
				</view>
			</view>
		</view>
		<view @tap="submit" class="btn1 btn-pri">确定</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				appoint_log_id: 0,
				can_house_state_arr: null,
				followList: [],
				pickerIndex: -1,
				
				name:'',
				discription:'',
				dissatisfaction:'',
				images_arr: [],
				images_text_arr: [], //图片
			};
		},
		onLoad: function(options) {

			this.appoint_log_id = options.id;
			var can_house_state_arr = JSON.parse(options.can_house_state_arr);
			var followList = [];
			for (let s in can_house_state_arr) {
				followList.push(can_house_state_arr[s]);
			}
			this.followList = followList;
			this.can_house_state_arr = can_house_state_arr;
		},
		methods: {
			pickerChange(e) {
				this.pickerIndex = e.detail.value;
			},
			// 上传图片
			upload() {
				var that = this;
				var len = that.images_arr.length;
			
				if (len >= 9) {
					functions.toast('最多上传9张图');
					return false;
				}
				functions.chooseImg(9 - len, function(res) {
					console.log(res);
					var images_arr = that.images_arr;
					var images_text_arr = that.images_text_arr;
					images_arr.push(res.url);
					images_text_arr.push(res.fullurl);
					that.images_arr = images_arr;
					that.images_text_arr = images_text_arr
				});
			},
			// 删除图片
			delImg(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				var images_arr = that.images_arr;
				var images_text_arr = that.images_text_arr;
				images_arr.splice(index, 1);
				images_text_arr.splice(index, 1);
				that.images_arr = images_arr;
				that.images_text_arr = images_text_arr
			},
			
			// 提交
			submit() {
				var that = this;
				var house_state=-1;
				var can_house_state_arr=this.can_house_state_arr;
				var pickerIndex=this.pickerIndex;
				var i=0;
				for (let s in can_house_state_arr) {
					if(i==pickerIndex){
						house_state=s;
					}
					i++;
				}
				if(house_state==-1){
					functions.toast('请选择跟进状态');
					return false;
				}
				if (!this.name) {
					functions.toast('请输入跟进标题');
					return false;
				}
				if (!this.discription) {
					functions.toast('请输入详细描述');
					return false;
				}
				var json = {
					appoint_log_id: this.appoint_log_id,
					house_state: house_state,
					name: this.name,
					discription: this.discription,
					dissatisfaction: this.dissatisfaction,
					images: this.images_arr.length > 0 ? this.images_arr.join(',') : '',
				};
				functions.checkLogin(function(ret) {
					if (ret) {
						//继续提交
						functions.submitAjaxData(that, '/api/xiluhouse/appoint/create_follow_log', json, function(res) {
							let pages = getCurrentPages(); // 页面栈数组，第一个元素为首页，最后一个元素为当前页面。
							let prevPage = pages[pages.length - 2]; // 上一页
							prevPage.$vm.has_change=true;
							functions.showSuccess(res.msg,function(){
								uni.navigateTo({
									url:'/pages/member/my_clients_detail/my_clients_detail?id='+that.appoint_log_id
								})
							});
						});
					} else {
						functions.toast('请先登录');
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.btn1 {
		margin: 40rpx auto 0;
		width: 100%;
	}

	.container {
		padding-top: 30rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.box {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 30rpx 0rpx rgba(184, 189, 202, 0.3);
		padding: 36rpx 30rpx 30rpx;

		.form_item {
			height: 75rpx;
			background: #F6F7FA;
			padding: 0 53rpx 0 20rpx;

			&::after {
				right: 20rpx;
			}
		}
	}

	textarea {
		background: #F6F7FA;
		width: 100%;
	}

	.t1 {
		height: 123rpx;
	}

	.t2 {
		height: 180rpx;
	}

	.up_box {
		background: #F6F7FA;
	}

	.img_box {
		width: 130rpx;
		height: 130rpx;
		background: #FFFFFF;
		border-radius: 5rpx;
		position: relative;
		margin-right: 16rpx;
		font-size: 24rpx;
		color: #B8BDCA;

		.close {
			width: 27rpx;
			height: 27rpx;
			position: absolute;
			top: -13rpx;
			right: -13rpx;
			z-index: 2;
		}

		.img {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 1;
		}

		&:nth-of-type(4) {
			margin-right: 0;
		}

		.icon_up {
			width: 36rpx;
			height: 32rpx;
			margin-bottom: 4rpx;
		}
	}
</style>
